<template>
  <view class="oa-content">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    
    <view class="tn-margin-xl tn-color-black map-footerfixed" @click="openLocation" :style="{paddingTop: vuex_custom_bar_height + 50 + 'px'}">
      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center position-info">
        <view class="icon-border">
          <view class="icon-pic">
            <view class="icon-image" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242409-assets/web-upload/fcc4eab6-b2ce-44eb-9165-c49b51f5f830.jpeg');width: 70rpx;height: 70rpx;background-size: cover;overflow: hidden;">
            </view>
          </view>
        </view>
        <view class="bubble">
          <view class="tn-color-white tn-padding-sm">
            <view class="">
              <text class="tn-text-sm">祈福新邨</text>
              <text class="tn-icon-route tn-padding-left-xs" style="color: #00FFC6;"></text>
            </view>
            <view class="tn-text-xs tn-padding-top-xs">立即打卡 ~</view>
          </view>
        </view>
      </view>
    </view>
    <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"
      @click="openLocation" :enable-scroll="false" :enable-zoom="false">
    </map>
    
    
    <view class="tn-margin tn-text-center tn-text-xl" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      {{date}}
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateTime',
    mixins: [template_page_mixin],
    data(){
      return {
        id: 0, // 使用 marker点击事件 需要填写id
        title: 'map',
        latitude: 22.961836,
        longitude: 113.330067,
        /* covers: [{
        	latitude: 22.961836,
        	longitude: 113.330067,
        	iconPath: 'https://cdn.nlark.com/yuque/0/2023/png/280373/1675936271542-assets/web-upload/8f3d0a29-cad4-4e4d-995b-0e08467dff02.png'
        }]*/
        
        title: 'TuniaoUI',
				date:'',
				setTime:''
        
      }
    },
    
    mounted() {
    	var setTime = setInterval( ()=> {
    		let date = new Date()
    		let year = date.getFullYear()
    		let month = date.getMonth() + 1
    		month >= 9 ? month :  month='0'+month
    		let day = date.getDate()
    		day >= 9 ? day : day = '0'+ day
    		let hour = date.getHours()
    		hour >= 9 ? hour : hour = '0'+hour 
    		let minute = date.getMinutes()
    		minute >= 9 ?  minute : minute = '0'+minute
    		let second = date.getSeconds()
    		second >= 9 ? second : second = '0'+second
    		this.date = year + '-'+month+'-'+day+"  "+hour+":"+minute+":"+second
    	}, 1000)
    },
    
    onHide(){
    	clearInterval(setTime)
    },
    
    methods: {
      openLocation() {
        wx.vibrateShort();
        uni.openLocation({
          longitude: 113.3298396012573,
          latitude: 22.961803525530176,
          name: '祈福新邨',
          address: '祈福新邨'
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.7;
      background-color: #FFFFFF;
    }
  }
  
  .oa-content{
    max-width: 640px;
    margin: 0 auto;
    // background-color: #F8F7F8;
    min-height: 100vh;
    padding-bottom: 60rpx;
    padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
  }
  
  /* 固定到地图上*/
  .map-footerfixed {
    max-width: 640px;
    margin: 0 auto;
    position: absolute;
    width: calc(100vw - 100rpx);
    z-index: 2;
    margin-top: 100rpx;
  }
  
  .map {
    // width: calc(100vw - 60rpx);
    width: 100vw;
    max-width: 640px;
    margin: 0 auto;
    height: 40vh;
    // border-radius: 8rpx;
    // border: 1rpx solid #F8F7F8;
    // margin: 30rpx 30rpx 100rpx 30rpx;
  }
  
  .bubble {
    position: absolute;
    background-color: #333333;
    border-radius: 20rpx;
    top: 0;
    left: 50%;
    transform: scale(0.9) translate(calc(-50% - 10rpx), calc(-100% - 24rpx));
  }
  
  .bubble::after {
    position: absolute;
    content: "";
    width: 0px;
    height: 0px;
    background: transparent;
    border-color: #333333 transparent transparent transparent;
    border-width: 20rpx;
    border-style: solid;
    box-sizing: content-box;
    // margin-top: -4px;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 88%);
  }
  
  .position-info {
    position: relative;
  }
  
  /* icon start */
  .icon-image {
    width: 70rpx;
    height: 70rpx;
    position: relative;
    overflow: hidden;
    border-radius: 100rpx;
  }
  
  .icon-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 12rpx solid #00FFC6;
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  .icon-border {
    margin: 20rpx 0 0 10rpx;
    border-radius: 100rpx;
    border: 26rpx solid #00FFC630;
  }
</style>
